<template>
    <view class="department-tree-item" v-if="data">
        <view class="item-box" v-if="data.children && data.children.length > 0">
            <view class="dep-item" @click="isShowSubDep = !isShowSubDep">
                <view class="icon">
                    <uni-icons :type="isShowSubDep ? 'minus-filled' : 'plus'"></uni-icons>
                </view>
                <text class="name">{{ data.name }}</text>
            </view>
            <view class="sub" v-if="isShowSubDep">
                <select-department-tree-item
                    v-for="(item, index) in data.children"
                    :data="item"
                    :key="index"
                    @selectFn="selectFn"></select-department-tree-item>
            </view>
        </view>
        <view class="item-box" v-else @click="selectFn(data)">
            <view class="dep-item">
                <text class="name">{{ data.Name }}</text>
                <view class="radio-yes" v-if="data.ID == id"><view></view></view>
                <view class="radio-no" v-else></view>
            </view>
        </view>
    </view>
</template>

<script>
import selectDepartmentTreeItem from "./select-department-tree-item.vue"
export default {
    name: "selectDepartmentTreeItem",
    components: {
        selectDepartmentTreeItem,
    },
    props: {
        data: {
            type: Object,
            default: () => {},
        },
        id: {
            type: Number,
            default: null,
        },
    },
    data() {
        return {
            isShowSubDep: false,
        }
    },
    mounted() {},
    onShow() {},
    methods: {
        selectFn(data) {
            this.$emit("selectFn", data)
        },
    },
}
</script>

<style lang="scss">
.department-tree-item {
    display: flex;
    flex: 1;
    height: 98rpx;
    padding: 0 48rpx;
    background: #ffffff;
    .item-box {
        display: flex;
        flex-direction: column;
        flex: 1;
        background: $color-white;
    }
}
.sub {
    .item-box {
        background: $uni-bg-color-grey;
    }
    .dep-item {
        padding-left: 2 * $app-page-padding;
    }
}
.dep-item {
    display: flex;
    flex: 1;
    flex-direction: row;
    height: 88rpx;
    padding: $app-page-padding 0;
    align-items: center;
    border-bottom: solid 2rpx #ebebeb;
    .icon {
        width: 40rpx;
        margin-right: 10rpx;
    }
    .name {
        flex: 1;
        font-size: 32rpx;
    }
}
</style>
